<template>
  <el-drawer
    v-model="localDrawer"
    direction="rtl"
    @close="handleClose"
    append-to-body
    destroy-on-close
  >
    <template #header>
      <h4 v-if="localType === 'add'" class="text-lg font-bold">添加课程</h4>
      <h4 v-if="localType === 'edit'" class="text-lg font-bold">修改课程</h4>
      <h4 v-if="localType === 'delete'" class="text-lg font-bold">删除课程</h4>
    </template>
    <template #default>
      <div v-loading="loading">
        <el-result
          v-if="localType === 'add'"
          icon="warning"
          title="确认吗"
          sub-title="请确认是否添加该课程？"
        >
        </el-result>
        <el-result
          v-if="localType === 'edit'"
          icon="warning"
          title="在下方修改这个课程"
        >
        </el-result>
        <el-result
          v-if="localType === 'delete'"
          icon="error"
          title="确认吗"
          sub-title="请确认是否删除该课程？"
        >
        </el-result>
        <template
          v-for="[key, value] in Object.entries(localItemData)"
          :key="key"
        >
          <div v-if="displayFields.includes(key)" class="pb-4">
            <label class="font-bold text-base text-gray-400">{{
              getLabel(key)
            }}</label>
            <div v-if="localType !== 'edit'" class="h-12 w-full mt-2">
              <el-input
                v-model="localItemData[key]"
                class="h-12 w-full mt-2"
                disabled
              ></el-input>
            </div>
            <el-input
              v-else
              v-model="localItemData[key]"
              class="h-12 w-full mt-2"
              placeholder="请输入"
            >
            </el-input>
          </div>
        </template>
      </div>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button :disabled="loading" @click="cancelClick">取消</el-button>
        <el-button :disabled="loading" type="primary" @click="confirmClick"
          >确认</el-button
        >
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import { ref, watch } from "vue";
import { ApiCourse } from "@/core/api/index.js";
import Swal from "sweetalert2";
import _ from "lodash";

const loading = ref(false);
const props = defineProps({
  drawer: {
    type: Boolean,
    required: true,
  },
  itemData: {
    type: Object,
    required: true,
  },
  type: {
    type: String,
    required: true,
  },
});
const emit = defineEmits(["update:drawer", "refresh-list"]);
const localDrawer = ref(props.drawer);
const localItemData = ref(props.itemData);
const localType = ref(props.type);

watch(
  () => props.drawer,
  (newVal) => {
    localDrawer.value = newVal;
  }
);

watch(
  () => props.itemData,
  (newVal) => {
    localItemData.value = _.cloneDeep(newVal);
  },
  { deep: true }
);

watch(
  () => props.type,
  (newVal) => {
    localType.value = newVal;
  }
);

const handleClose = () => {
  emit("update:drawer", false);
};

const getLabel = (field) => {
  const labels = {
    courseId: "课程ID",
    courseName: "课程名称",
    now: "已选人数",
    all: "容量",
    teacher: "任课教师",
  };
  return labels[field];
};

const displayFields = ["courseName", "teacher", "all"];

const cancelClick = () => {
  emit("update:drawer", false);
};

const confirmClick = () => {
  if (localType.value === "add") {
    addCourse();
  }
  if (localType.value === "edit") {
    editCourse();
  }
  if (localType.value === "delete") {
    deleteCourse();
  }
};

const addCourse = async () => {
  loading.value = true;
  const response = await ApiCourse.addCourse(localItemData.value);
  if (response.code == 0) {
    Swal.fire({
      title: "成功添加课程",
      text: `您已成功添加${localItemData.value.teacher}老师的${localItemData.value.coursename}`,
      icon: "success",
    });
    emit("refresh-list");
  }
  loading.value = false;
  emit("update:drawer", false);
};

const editCourse = async () => {
  loading.value = true;
  const response = await ApiCourse.editCourse({
    courseId: localItemData.value.courseId,
    courseName: localItemData.value.courseName,
    now: localItemData.value.now,
    teacher: localItemData.value.teacher,
    all: localItemData.value.all,
    sAll: localItemData.value.sall,
  });
  if (response.code == 0) {
    Swal.fire({
      title: "成功修改课程",
      text: `您已成功修改${localItemData.value.teacher}老师的${localItemData.value.courseName}`,
      icon: "success",
    });
    emit("refresh-list");
  }
  loading.value = false;
  emit("update:drawer", false);
};

const deleteCourse = async () => {
  loading.value = true;
  const response = await ApiCourse.deleteCourse({
    courseId: localItemData.value.courseId,
  });
  if (response.code == 0) {
    Swal.fire({
      title: "成功删除课程",
      text: `您已成功删除${localItemData.value.teacher}老师的${localItemData.value.coursename}`,
      icon: "success",
    });
    emit("refresh-list");
  }
  loading.value = false;
  emit("update:drawer", false);
};
</script>
